import 'package:flutter/material.dart';

void main() {
  runApp(const _MyApp());
}

class _MyApp extends StatelessWidget {
  const _MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter FittedBox",
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true),
      home: const _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatefulWidget {
  const _MyHomePage({super.key});

  @override
  State<StatefulWidget> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<_MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text("FittedBox"),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary),
      body: ListView(
        // 放置一系列的 FittedBox , 至于 Row 中
        children: <Widget>[
          // FittedBox.contain
          Row(
            children: <Widget>[
              // 左侧容器
              Container(
                color: Colors.blue,
                width: 130.0,
                height: 130.0,
                margin: const EdgeInsets.only(bottom: 10.0),
                child: FittedBox(
                  // 缩放方式
                  fit: BoxFit.contain,
                  // 对齐方式
                  alignment: Alignment.topLeft,
                  child: Container(
                    color: Colors.yellow,
                    child: const Text("FittedBox"),
                  ),
                ),
              ),
              // 右侧容器
              Container(
                margin: const EdgeInsets.only(left: 30.0, top: 10.0),
                child: const Text(
                    "BoxFit.contain",
                    style: TextStyle(fontSize: 20.0)
                ),
              )
            ],
          ),
          // FittedBox.cover
          Row(
            children: <Widget>[
              Container(
                color: Colors.blue,
                width: 130.0,
                height: 130.0,
                margin: const EdgeInsets.only(bottom: 10.0),
                child: FittedBox(
                  fit: BoxFit.cover,
                  alignment: Alignment.topLeft,
                  child: Container(
                    color: Colors.yellow,
                    child: const Text("FittedBox"),
                  )
                ),
              ),
              Container(
                margin: const EdgeInsets.only(left: 30.0, top: 10.0),
                child: const Text(
                  "BoxFit.cover",
                  style: TextStyle(fontSize: 20.0),
                ),
              )
            ],
          ),
          // FittedBox.fill
          Row(
            children: <Widget>[
              Container(
                color: Colors.blue,
                width: 130.0,
                height: 130.0,
                margin: const EdgeInsets.only(bottom: 10.0),
                child:  FittedBox(
                  fit: BoxFit.fill,
                  alignment: Alignment.topLeft,
                  child:  Container(
                    color: Colors.yellow,
                    child: const Text("FittedBox"),
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(left: 30.0, top: 10.0),
                child: const Text(
                  "BoxFit.fill",
                  style: TextStyle(fontSize: 20.0),
                ),
              )
            ],
          ),
          // FittedBox.scaleDown
          Row(
            children: <Widget>[
              Container(
                color: Colors.blue,
                width: 130.0,
                height: 130.0,
                margin: const EdgeInsets.only(bottom: 10.0),
                child:  FittedBox(
                  fit: BoxFit.scaleDown,
                  alignment: Alignment.topLeft,
                  child:  Container(
                    color: Colors.yellow,
                    child: const Text("FittedBox"),
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(left: 30.0, top: 10.0),
                child: const Text(
                  "BoxFit.scaleDown",
                  style: TextStyle(fontSize: 20.0),
                ),
              )
            ],
          ),
          // FittedBox.fitHeight
          Row(
            children: <Widget>[
              Container(
                color: Colors.blue,
                width: 130.0,
                height: 130.0,
                margin: const EdgeInsets.only(bottom: 10.0),
                child:  FittedBox(
                  fit: BoxFit.fitHeight,
                  alignment: Alignment.topLeft,
                  child:  Container(
                    color: Colors.yellow,
                    child: const Text("FittedBox"),
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(left: 30.0, top: 10.0),
                child: const Text(
                  "BoxFit.fitHeight",
                  style: TextStyle(fontSize: 20.0),
                ),
              )
            ],
          ),
          // FittedBox.fitWidth
          Row(
            children: <Widget>[
              Container(
                color: Colors.blue,
                width: 130.0,
                height: 130.0,
                margin: const EdgeInsets.only(bottom: 10.0),
                child:  FittedBox(
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.topLeft,
                  child:  Container(
                    color: Colors.yellow,
                    child: const Text("FittedBox"),
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(left: 30.0, top: 10.0),
                child: const Text(
                  "BoxFit.fitWidth",
                  style: TextStyle(fontSize: 20.0),
                ),
              )
            ],
          ),
          // FittedBox.none
          Row(
            children: <Widget>[
              Container(
                color: Colors.blue,
                width: 130.0,
                height: 130.0,
                margin: const EdgeInsets.only(bottom: 10.0),
                child:  FittedBox(
                  fit: BoxFit.none,
                  alignment: Alignment.topLeft,
                  child:  Container(
                    color: Colors.yellow,
                    child: const Text("FittedBox"),
                  ),
                ),
              ),
              Container(
                margin: const EdgeInsets.only(left: 30.0, top: 10.0),
                child: const Text(
                  "BoxFit.none",
                  style: TextStyle(fontSize: 20.0),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
